var carousel = document.querySelector("ul");
var left_arrow = document.querySelector(".left_arrow");
var right_arrow = document.querySelector(".right_arrow");
var control_arr = document.querySelectorAll("ol li");
var ul_liArr = document.querySelectorAll("ul li");
var now_index = 0;
var bool_r = true;
var bool_l = true;

for(var i = 0;i<control_arr.length;i++){
	control_arr[i].style.background = "";
}
control_arr[now_index].style.background = "#87ceeb";
right_arrow.addEventListener("click",function(){
	if(bool_r){
		bool_r = false;
		++now_index >= 5 ? now_index = 0:"";
		for(var i = 0;i<control_arr.length;i++){
			control_arr[i].style.background = "";
		}
		control_arr[now_index].style.background = "#87ceeb";
		carousel.style.transform = "translateX("+(-now_index*100)+"%)";
		carousel.style.transiton = "none";
		carousel.addEventListener("transitionend",function(){		
			carousel.style.transiton = "all .8s ease-in-out";
			bool_r = true;
		})
	}
})
left_arrow.addEventListener("click",function(){
		if(bool_l){
			bool_l = false;
			--now_index < 0 ? now_index = ul_liArr.length-1:"";
			for(var i = 0;i<control_arr.length;i++){
				control_arr[i].style.background = "";
			}
			control_arr[now_index].style.background = "#87ceeb";
			carousel.style.transform = "translateX("+(-now_index*100)+"%)";
			carousel.style.transiton = "none";
			carousel.addEventListener("transitionend",function(){
				carousel.style.transiton = "all .8s ease-in-out";
				bool_l = true;
		})
	}	
})
for(var i =0;i<control_arr.length;i++){
	control_arr[i].index = i;
	control_arr[i].addEventListener("mouseover",function(){
		for(var j = 0;j<control_arr.length;j++){
			control_arr[j].style.background = "";
		}
		this.style.background = "#87ceeb";
		now_index = this.index;
		carousel.style.transform = "translateX("+(-now_index*100)+"%)";
	})
}
